<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="程月">
    <title>简易日历</title>
    <style>
        *{
            box-sizing: border-box;
        }
    body{
        margin: 0;
    }
    main{
        width: 420px;
        height: 450px;
        margin: 20px auto;
        background-color: #ccc;
        padding: 15px;
       
    }
    .top{
        width: 100%;
        height: 70%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap; 
    }
    div{
        color: white;
        width: 90px;
        height: 90px;
        background-color: #333;
        text-align: center;
        font-size: 25px;
        padding-top: 10px;
        border: 1px  solid  #333;
    }
    
    .bottom{
        width: 100%;
        height: 29%;
        border: 1px  solid white;
        padding: 15px;
    }
    p{
        font-size: 20px;
        margin: 0;
        color: #444;
    }
    span{
        font-size: 25px;
        color: #666;
    }
    </style>
</head>
<body>
     <main>
         <section class="top">
            <div>
                <strong>1</strong> <br> JUN
            </div>
            <div>
                <strong>2</strong> <br> FEB
            </div>
            <div>
                <strong>3</strong> <br> MAR
            </div>
            <div>
                <strong>4</strong> <br> APR
            </div>
            <div>
                <strong>5</strong> <br> MAY
            </div>
            <div>
                <strong>6</strong> <br> JAN
            </div>
            <div>
                <strong>7</strong> <br> JUL
            </div>
            <div>
                <strong>8</strong> <br> AGU
            </div>
            <div>
                <strong>9</strong> <br> SEP
            </div>
            <div>
                <strong>10</strong> <br> OCT
            </div>
            <div>
                <strong>11</strong> <br> NOV
            </div>
            <div>
                <strong>12</strong> <br> DEC
            </div>
         </section>
         <section class="bottom">
               <p></p>  
               <span></span>
         </section>
     </main>
</body>
</html>
<script>
    var divs = document.querySelectorAll('div');
    var bottom = document.querySelector('.bottom');
    // var div = document.querySelector('div');
    var p = document.querySelector('p');
    var span = document.querySelector('span');

    var con1 = ['1月节日','2月节日','3月节日','4月节日','5月节日','6月节日',
            '7月节日','8月节日','9月节日','10月节日','11月节日','12月节日',];

    var con2 = [
		"元旦：1月1日至3日放假三天。",
        "春节：2月2日至8日放假7天。",
        "妇女节：3月8日妇女节，与我无关。",
        "清明节：4月3日至5日放假3天",
        "劳动节：4月30日至5月2日放假3天。",
        "端午节：6月4日至6日放假3天。",
        "小暑：7月7日小暑。不放假。",
        "七夕节：8月6日七夕节。不放假。",
        "中秋节：9月10日至12日放假3天。",
        "国庆节：10月1日至7日放假7天。",
        "立冬：11月8日立冬。不放假。",
        "艾滋病日:12月1日<br />废除奴隶制国际日:12月2日。"];

    for(var i=0; i < divs.length; i ++){
        divs[i].index = i;
        divs[i].onmouseover = function (ev) {
            p.innerHTML = con1[this.index];
            span.innerHTML = con2[this.index];
            divs[this.index].style.backgroundColor = 'white';
            divs[this.index].style.color = 'pink'; 
        }
         divs[i].onmouseout = function (ev){
            divs[this.index].style.cssText = '';
         }
    }




</script>